<template>
	<view class="box">
		<view class="form">
			<view class="form-title">标题</view>
			<view class="form-input">
				<input type="text" v-model="info.title"/>
			</view>
		</view>
		<view class="form">
			<view class="form-title">排序</view>
			<view class="form-input">
				<input type="number" v-model="info.index_id"/>
			</view>
		</view>
		<view class="form">
			<view class="form-title">设置裂变方式</view>
			<view class="form-input edit-list-footer">
				<view class="edit-list-footer">
					<view @click="setRadio(1)">
						<image :src="ossUrl + `/static/image/${info.type === 1 ? 'g' : '2'}.png`" mode=""></image>
						免费
					</view>
					<view @click="setRadio(2)">
						<image :src="ossUrl + `/static/image/${info.type === 2 ? 'g' : '2'}.png`" mode=""></image>
						分享解锁
					</view>
				</view>
			</view>
		</view>
		<view class="btns" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		InformationEditVideo
	} from '@/common/http/api.js'
	import {
		uploadImg,
		uploadVideo,
		uploadDel
	} from '@/common/upload.js'
	export default {
		data() {
			return {
				info: '',
				id: ''
			};
		},
		onLoad(e) {
			this.id = e.id
			uni.showLoading()
			InformationEditVideo({id: this.id, term: 1}).then(res => {
				this.info = res.data
			}).finally(e => {
				uni.hideLoading()
			})
		},
		methods: {
			setRadio(e){
				if(this.info.type == e){
					this.info.type = 0
				} else {
					this.info.type = e
				}
			},
			//提交视频
			async submit() {
				await this.$mValidate(
					[{
							require: true,
							key: 'title',
							message: '请输入标题'
						}
					], this.info)
	
				let data = {
					...this.info,
					term: 2
				}
				uni.showLoading({
					mask: true
				})
				InformationEditVideo(data).then(res => {
					uni.showToast({duration:3000,
						title: '保存成功！',
						icon: 'none'
					})
					uni.navigateBack()
				}).finally(e => {
					uni.hideLoading()
				})
			}
		},
	};
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}
	
	image {
		width: 100%;
		height: 100%;
	}
	.box {
		padding-top: 30rpx;
	}
	.form {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 60rpx;
	
		.form-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			margin-bottom: 26rpx;
	
			text {
				color: #FF8400;
				font-size: 24rpx;
			}
		}
	
		.form-input {
			width: 100%;
	
			&>input {
				width: 690rpx;
				height: 80rpx;
				background: #F0F0F0;
				border-radius: 6rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
			}
	
		}
	
		.upload {
			width: 200rpx;
			height: 140rpx;
	
			border-radius: 6rpx;
	
			.upload-item-add {
				background: #F0F0F0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
	
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	
		.radio {
			display: flex;
			flex-wrap: wrap;
	
			.radio-item {
				height: 53rpx;
				border-radius: 26rpx;
				border: 1px solid #999999;
				padding: 14rpx 48rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
	
			.radio-item-ac {
				background: #12B475;
				border-radius: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				border: none;
			}
		}
	
		.textarea {
			textarea {
				width: 100%;
				height: 160rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 29rpx 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
	
			.textarea-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
		}
	
		.price {
			.price-input {
				display: flex;
				align-items: center;
	
				input {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 32rpx;
					color: #FF4B4B;
					width: 321rpx;
					height: 74rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0 25rpx;
					margin-right: 20rpx;
				}
	
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #131313;
			}
		}
	}
	.edit-list-footer {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		view {
			display: flex;
			align-items: center;
			image {
				width: 37rpx;
				height: 37rpx;
				margin-right: 17rpx;
			}
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #131313;
		}
		view:last-child{
			margin-left: 71rpx;
		}
	}
	.btns {
		width: 578rpx;
		height: 86rpx;
		background: #12B475;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(177,177,177,0.45);
		border-radius: 43rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}
</style>